/**
 * 规划的路线展示item
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { px2dp } from 'rn-xiaobu-utils';
import Icon from '../../public/icon';
import flexStyle from '../../../configs/flex';
import { iconDefaultColor } from '../../../configs/skin';
import fontsize from '../../../configs/fontsize';
import NavigationService from '../../../utils/NavigationService';

export default class RouteInfo extends Component {
  /**
   * 获取标题内容
   * @returns {*}
   */
  getTitle = ()=>{
    let length = this.props.lines.length
    return (
      <Text style={[fontsize.fontsize28, { marginLeft: px2dp(30) }]}>
        {this.props.lines.map((element, index)=>(
          <Text key={index} style={fontsize.fontsize28}>
            {element}&nbsp;
            {index < length - 1 ? <Icon name={'next'} color={'#999999'}
              size={20}/> : null}&nbsp;</Text>
        )
        )
        }
      </Text>
    )
  }

  /**
   * 跳转线路规划详情页
   */
  goToRouteDetails = () => {
    NavigationService.navigate('RouteDetails', {
      index: this.props.id
    })
  }

  render () {
    return (
      <TouchableOpacity style={styles.container} onPress={this.goToRouteDetails}>
        <View style={[styles.top, flexStyle.flexH, flexStyle.flexVc]}>
          <Icon name={'bus'} size={42}/>
          {this.getTitle()}
        </View>
        <View style={[styles.bottom, flexStyle.flexH, flexStyle.flexVc, flexStyle.flexHsb]}>
          <Text style={[fontsize.fontsize24, { color: iconDefaultColor }]}>{this.props.leftinfo}</Text>
          <Text style={[fontsize.fontsize24, { color: '#999999' }]}>{this.props.rightinfo}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: px2dp(165),
    backgroundColor: '#ffffff',
    paddingLeft: px2dp(30),
    paddingRight: px2dp(30),
    marginBottom: px2dp(16)
  },

  top: {
    height: px2dp(100),
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#DDDDDD'
  },

  bottom: {
    flex: 1
  }
});